<template>
    <div class="goods-container">
        <!-- 筛选搜索 -->
        <div class="search-bar">
            <div class="right">
                <div class="input-unit">
                    <div class="lable">
                        问题状态
                    </div>
                    <el-select
                        v-model="filterData.qstatus"
                        class="input-unit-value"
                        size="small"
                        placeholder="不限"
                        @change="fnGetData(1)"
                    >
                        <el-option
                            v-for="item in types"
                            :key="item.cate_no"
                            :label="item.title"
                            :value="item.cate_no"
                        />
                    </el-select>
                </div>
                <div class="input-unit">
                    <div class="lable">
                        回答状态
                    </div>
                    <el-select
                        v-model="filterData.astatus"
                        class="input-unit-value"
                        size="small"
                        placeholder="不限"
                        @change="fnGetData(1)"
                    >
                        <el-option
                            v-for="item in types"
                            :key="item.cate_no"
                            :label="item.title"
                            :value="item.cate_no"
                        />
                    </el-select>
                </div>
                <el-button
                    size="small"
                    type="primary"
                    @click="fnGetData(1)"
                >
                    搜索
                </el-button>
            </div>
        </div>
        <!-- /筛选搜索 -->

        <!-- 数据列表 -->
        <div class="table-wrapper">
            <div
                class="empty-wrap"
                v-if="questions.length <= 0 && !loading"
            >
                <div class="empty-img" />
                <p class="empty-text">
                    该商品还没有问答哦~
                </p>
            </div>
            <el-table
                ref="mainTable"
                :data="questions"
                class="common-table"
                style="width: 100%;"
                v-if="questions.length > 0"
                v-loading="loading"
                row-key="question_no"
                :expand-row-keys="expand"
            >
                <!-- 嵌套回答表格开始 -->
                <el-table-column
                    type="expand"
                    :width="40"
                >
                    <template slot-scope="parent">
                        <el-table
                            :data="parent.row.answer_list"
                            height="100%"
                            class="common-table no-header"
                            style="width: 100%;"
                            :show-header="false"
                            ref="subTable"
                        >
                            <el-table-column :width="40" />
                            <el-table-column
                                header-align="left"
                                :min-width="300"
                                label="内容"
                                show-overflow-tooltip
                            >
                                <template slot-scope="scope">
                                    <div class="good-detail">
                                        答: {{ scope.row.content }}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column
                                prop="expire_time"
                                :min-width="150"
                                label="时间"
                            >
                                <template slot-scope="scope">
                                    {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                                </template>
                            </el-table-column>

                            <el-table-column
                                prop="student_true_name"
                                :min-width="70"
                                label="用户名"
                                show-overflow-tooltip
                            />
                            <el-table-column
                                :min-width="90"
                                label="回答数量"
                                show-overflow-tooltip
                            >
                                --
                            </el-table-column>
                            <el-table-column
                                :min-width="70"
                                prop="status"
                                label="状态"
                                :formatter="statusFormatter"
                            />
                            <el-table-column
                                label="操作"
                                :width="250"
                            >
                                <template slot-scope="scope">
                                    <div>
                                        <el-button
                                            type="text"
                                            class="btn-nopadding"
                                            :disabled="scope.row.status == 1"
                                            @click="fnChangeAnswerStatus(scope.row, 1)"
                                        >
                                            通过
                                        </el-button>
                                        <el-button
                                            type="text"
                                            class="btn-nopadding"
                                            :disabled="scope.row.status == -1"
                                            @click="fnChangeAnswerStatus(scope.row, -1)"
                                        >
                                            不通过
                                        </el-button>
                                        <el-button
                                            type="text"
                                            class="btn-nopadding"
                                            @click="fnDeleteAnswer(parent.row.answer_list, scope.row.answer_no,parent.row.question_no, scope.$index)"
                                        >
                                            删除
                                        </el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <!-- 嵌套回答表格结束 -->

                <el-table-column
                    header-align="left"
                    :min-width="300"
                    label="内容"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <div class="good-detail">
                            问: {{ scope.row.content }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="expire_time"
                    :min-width="150"
                    label="时间"
                >
                    <template slot-scope="scope">
                        {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>

                <el-table-column
                    prop="student_true_name"
                    :min-width="70"
                    label="用户名"
                    show-overflow-tooltip
                />
                <el-table-column
                    :min-width="90"
                    label="回答数量"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        {{ scope.row.answer_list.length }}
                    </template>
                </el-table-column>
                <el-table-column
                    :min-width="70"
                    prop="status"
                    label="状态"
                    :formatter="statusFormatter"
                />
                <el-table-column
                    label="操作"
                    fixed="right"
                    :width="250"
                >
                    <template slot-scope="scope">
                        <div>
                            <el-button
                                type="text"
                                class="btn-nopadding"
                                :disabled="scope.row.status == 1"
                                @click="fnChangeQuestionStatus(scope.row, 1)"
                            >
                                通过
                            </el-button>
                            <el-button
                                type="text"
                                class="btn-nopadding"
                                :disabled="scope.row.status == -1"
                                @click="fnChangeQuestionStatus(scope.row, -1)"
                            >
                                不通过
                            </el-button>
                            <el-button
                                type="text"
                                class="btn-nopadding"
                                @click="fnShowAddAnswer(scope.row)"
                            >
                                添加回答
                            </el-button>
                            <el-button
                                type="text"
                                class="btn-nopadding"
                                @click="fnDeleteQuestion(scope.row.question_no, scope.$index)"
                            >
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 数据列表 -->

        <question-dialog
            :title="dialogTitle"
            ref="question"
        />
    </div>
</template>

<script>
import questionDialog from '../../components/manage/question-dialog';
/**
 * @param   {String}        goods_no        //商品编号
 * @param   {Array}         types           //筛选类型
 * @param   {Object}        filterData      //回答状态
 * @param   {Number}        prevPage        //商品列表页码
 */
export default {
    components: {
        questionDialog
    },
    data() {
        return {
            goods_no: '',
            types: [{
                cate_no: 0,
                title: '全部'
            }, {
                cate_no: 1,
                title: '待审核'
            }, {
                cate_no: 2,
                title: '已审核'
            }, {
                cate_no: 3,
                title: '审核不通过'
            }],
            filterData: {
                qstatus: 0,
                astatus: 0,
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0,
                total_page: 0
            },
            loading: true,
            lastQueryTime: 0,
            questions: [
            ],
            dialogTitle: '',
            expand: [],
            prevPage: '',
            prevData: {}
        };
    },
    created() {
        this.goods_no = this.$route.query.goods_no;
        this.prevPage = this.$route.query.page;
        this.prevData = this.$route.query.filterData;
        this.fnSetHeader();
        if (this.goods_no) {
            this.fnGetData();
        } else {
            this.$message({
                type: 'warning',
                center: true,
                message: '商品编号不存在',
            });
        }
    },
    mounted () {
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
    },
    destroyed(){
        window.removeEventListener('popstate', this.goBack, false);
    },
    methods: {
        /**
         * 监听返回按钮
         */
        goBack () {
            this.$router.replace({
                name: 'GoodsList',
                query: {
                    page: this.prevPage,
                    filterData: this.prevData
                }
            });
            return;
        },

        /**
         *  设置页面标题
         */
        fnSetHeader () {
            this.$store.commit('SET_HEADER', [
                {
                    title: "校园代理",
                },
                {
                    title: '工作'
                },
                {
                    title: "商品问答"
                }]
            );
        },


        /**
         * 状态过滤
         */
        statusFormatter(row, column, status) {
            switch (status) {
                case 0:
                    return '待审核';
                case 1:
                    return '已展现';
                case -1:
                    return '未展现';
                default:
                    return '未知';
            }
        },

        /**
         * 获取问题数据
         */
        fnGetData() {
            let timeTmp = new Date().getTime();

            this.lastQueryTime = timeTmp;

            this.loading = true;
            this.questions = [];

            this.$post('/student/shop_goods_question%5Cget_list', {
                goods_no: this.goods_no,
            }, resp => {
                if (this.lastQueryTime != timeTmp) {
                    return;
                }
                if (resp.code == 1) {

                    let res = [];

                    resp.data.list.forEach(item => {
                        if (this.checkStatus(item.status, this.filterData.qstatus)) {
                            let tmpAnswers = [];

                            for (var i in item.answer_list) {
                                if (this.checkStatus(item.answer_list[i].status, this.filterData.astatus)) {
                                    tmpAnswers.push(item.answer_list[i]);
                                }
                            }
                            item.answer_list = tmpAnswers;
                            if (this.filterData.qstatus == 0 || (item.answer_list && item.answer_list.length > 0)) {
                                res.push(item);
                            }
                        }
                    });

                    this.questions = res;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
                this.loading = false;
            });
        },

        /**
         * 筛选
         */
        checkStatus(status, check) {
            if (check == 0) {
                return true;
            } else if (check == 1 && status == 0) {
                return true;
            } else if (check == 2 && status != 0) {
                return true;
            } else if (check == 3 && status == -1) {
                return true;
            }
            return false;
        },

        /**
         * 问题通过和不通过
         */
        fnChangeQuestionStatus(item, status) {
            this.$confirm('确认' + (status == 1 ? '通过' : '不通过') + '该项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_question%5Cset_question_status', {
                    question_no: item.question_no,
                    status: status
                }, resp => {
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.$set(item, 'status', status);
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * 审核回答
         */
        fnChangeAnswerStatus(item, status) {
            this.$confirm('确认' + (status == 1 ? '通过' : '不通过') + '该项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_question%5Cset_question_answer_status', {
                    answer_no: item.answer_no,
                    status: status
                }, resp => {
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.$set(item, 'status', status);
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * 删除问题
         */
        fnDeleteQuestion(question_no, index) {
            this.$confirm('确认删除该项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_question%5Cdelete_question', {
                    question_no: question_no
                }, resp => {
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.questions.splice(index, 1);
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * 删除回答
         */
        fnDeleteAnswer(list, answer_no, question_no, index) {
            this.$confirm('确认删除该项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_question%5Cdelete_question_answer', {
                    answer_no: answer_no
                }, resp => {
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.expand = [question_no];
                        this.fnGetData();
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * 添加问题回答
         */
        fnShowAddAnswer(question) {
            this.dialogTitle = '回答';
            this.$refs.question.fnShow().then(data => {
                this.$post('/student/shop_goods_question%5Cadd_question_answer', {
                    question_no: question.question_no,
                    goods_no: this.goods_no,
                    content: data.content,
                    student_true_name: data.nick,
                    create_time: Date.parse(data.create_time) / 1000
                }, resp => {
                    if (resp.code == 1) {
                        this.$notify({
                            title: '成功',
                            message: '添加成功',
                            type: 'success'
                        });
                        this.expand = [question.question_no];
                        this.fnGetData();
                    } else if (resp.code == 0) {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },
    }
};

</script>

<style lang="less" scoped>
  .goods-container {
    background-color: #fff;
    padding: 15px;
    flex-direction: column;
    height: 100%;
    flex: 1;
  }
  .search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .input-unit {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      flex-grow: 0;
      margin-right: 15px;
      &-value {
        width: 200px;
      }
      .lable {
        flex-shrink: 0;
        margin: 0 5px 0 0;
      }
    }
  }
  .table-wrapper {
    flex: 1;
    overflow: hidden;
  }
  .pagination-wrapper .el-pagination {
    margin-top: 10px;
    float: right;
  }

  .good-detail {
    display: flex;
    align-items: center;
    .cover {
      flex-shrink: 0;
      flex-grow: 0;
      width: 60px;
      height: 60px;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      margin-right: 5px;
    }
    .detail {
      .title {
        font-size: 14px;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        letter-spacing: 1px;
      }
      .no {
        font-size: 12px;
        font-weight: 400;
        color: rgba(96, 105, 114, 1);
        line-height: 17px;
        margin-top: 2px;
      }
      .type {
        font-size: 12px;
        font-weight: 400;
        color: rgba(96, 105, 114, 1);
        line-height: 17px;
        margin-top: 2px;
      }
    }
  }

  .empty-wrap {
    text-align: center;
    margin-top: 150px;
    .empty-img {
      width: 400px;
      height: 300px;
      margin: 0 auto;
      background-image: url(//cdn.zsdx.cn/wei/images/hire/manage/market/empty-good-list.png);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .empty-text {
      text-align: center;
      margin-top: 40px;
    }
  }
</style>
<style lang="less">
  .goods-container {
    .common-table {
      margin-top: 15px;
      border: 1px solid rgba(244, 244, 244, 1);
      border-bottom: 0;
      th {
        background: rgba(251, 251, 251, 1);
        padding: 10px 0;
      }
      td {
        padding: 7px 0;
      }
      tr {
        background-color: #fbfbfb;
      }
      &.no-header {
        margin-top: 0;
        border: 0;
        &::after,
        &::before {
          display: none;
        }
        tr {
          background-color: #fff;
        }
        .el-table__empty-block {
          display: none;
        }
      }
      .el-table__expanded-cell {
        padding: 0;
      }
    }
    .is-scrolling-none {
      transform: translate3d(0, 0, 0);
    }
  }
</style>